<template>
    <div id='' class='menu_content'>
        <div class="button_header">
            <Button type="primary" @click="add">新增</Button>
        </div>
        <div class="table_content">
            <Table row-key="id" :columns="columns" :load-data="handleLoadData" :update-show-children="true" :data="list" border>
                <template slot-scope="{row,index}" slot="icon">
                    <Icon :type="row.icon" :size="24" />
                </template>
                <template slot-scope="{row,index}" slot="systemType">
                    <Tag v-if="row.systemType == '0'||row.systemType == '1'" :color="row.systemType == '0'?'blue':'green'">{{row.systemType == '0'?'后台':row.systemType == '1'?'前台':''}}</Tag>
                </template>
                <template slot-scope="{row,index}" slot="type">
                    <Tag v-if="row.type == '0'||row.type == '1'" :color="row.type == '0'?'blue':'default'">{{row.type == '0'?'菜单':row.type == '1'?'按钮':''}}</Tag>
                </template>
                <template slot-scope="{ row, index }" slot="action">
                    <a v-if="row.type == '0'||row.type == '1'" type="text" @click="edit(row)">编辑</a>
                    <Divider v-if="row.type == '0'||row.type == '1'" type="vertical" />
                    <a v-if="row.type == '0'||row.type == '1'" type="text" @click="remove(row)">删除</a>
                </template>
            </Table>
        </div>
        <Modal v-model="modalShow" width="1200" :mask-closable="false" :title="modalTitle">
            <components v-if="modalShow" :is="comps" ref="coms" />
            <div slot="footer">
                <Button type="text" @click="cancel">取消</Button>
                <Button type="primary" @click="ok">确定</Button>
            </div>
        </Modal>
        <RemoveForm ref="removeMoal" :title="'确认删除吗'" :content="'确认删除该条数据？'" :icon="'md-help-circle'" :top="'150px'" :iconColor="'#ec9c1a'" @onRemove="srueRemove" />
    </div>
</template>
<script>
import { columns } from './menu/tableConfig'
import RemoveForm from '@/components/modules/removeModal/index.vue'
import AddOrUpdate from './menu/addOrUpdate.vue'
export default {
    name: '',
    props: [''],
    data() {
        return {
            modalTitle: '',
            modalShow: false,
            columns: columns,
            comps: AddOrUpdate,
            list: []
        };
    },
    components: { RemoveForm: RemoveForm },
    computed: {},
    beforeMount() { },
    created() {
        // this.getList()
    },
    mounted() {
        this.getList()
    },
    methods: {
        getList(pid = '0', subsystemId = '', cb) {
            this.$http.$get('getBufferTree', { params: { pid: pid, subsystemId: subsystemId } }).then(res => {
                for (let i = 0; i < res.data.length; i++) {
                    const element = res.data[i];
                    if (element['_loading'] == true) {
                        element['children'] = []
                        element['_loading'] = false
                    } else {
                        delete element['children']
                        delete element['_loading']
                    }
                }
                if (!cb) {
                    if (res.code == 200) {
                        this.list = res.data
                    }
                } else {
                    cb(res.data)
                }
            })
        },
        handleLoadData(item, callback) {
            if (item.type == '0' || item.type == '1') {
                this.getList(item.id, item.subsystemId, (res) => {
                    callback(res)
                })
            } else {
                this.getList('0', item.subsystemId, (res) => {
                    callback(res)
                })
            }
        },
        edit(row) {
            this.modalTitle = '编辑'
            this.modalShow = true,
                this.$nextTick(() => {
                    this.$refs.coms.setInit(row)
                })
        },
        add() {
            this.modalTitle = '新增'
            this.modalShow = true
        },
        cancel() {
            this.modalTitle = ''
            this.modalShow = false
        },
        ok() {
            this.$refs.coms.getData(() => {
                this.modalShow = false
                this.getList()
            })
        },
        remove(row) {
            this.$refs.removeMoal.onShow(true, row);
        },
        srueRemove(event) {
            this.$http.$get('deleteMenu', { params: { id: event.id } }).then(res => {
                if (res.code == 200) {
                    this.$Message.success('删除成功');
                    this.getList()
                }
            })
        }
    },
    watch: {}
}
</script>
<style lang='less' scoped>
.menu_content {
    background-color: #fff;
    padding: 0 20px;
    width: 100%;
    height: 800px;
    .button_header {
        height: 48px;
        display: flex;
        align-items: center;
    }
    .table_content {
        height: 752px;
        overflow: auto;
    }
}
</style>